<template>
    <div class="swipe">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item of swipe" :key="item.id">
                <img :src="item.imgUrl" :alt="item.id" />
            </mt-swipe-item>
        </mt-swipe>
    </div>  
</template>
<script>
export default {
    data(){
        return{
            swipe:[
                {
                    "id":"01",
                    "imgUrl":require("@/assets/img/swipe/banner1.jpg")
                },
                {
                    "id":"02",
                    "imgUrl":require("@/assets/img/swipe/banner2.jpg")
                },
                {
                    "id":"03",
                    "imgUrl":require("@/assets/img/swipe/banner3.jpg")
                },
                {
                    "id":"04",
                    "imgUrl":require("@/assets/img/swipe/banner4.png")
                },
                {
                    "id":"05",
                    "imgUrl":require("@/assets/img/swipe/banner5.jpg")
                },
                {
                    "id":"06",
                    "imgUrl":require("@/assets/img/swipe/banner6.jpg")
                },
                {
                    "id":"07",
                    "imgUrl":require("@/assets/img/swipe/banner7.jpg")
                },
                {
                    "id":"08",
                    "imgUrl":require("@/assets/img/swipe/banner8.jpg")
                },
                {
                    "id":"09",
                    "imgUrl":require("@/assets/img/swipe/banner9.jpg")
                },
                {
                    "id":"10",
                    "imgUrl":require("@/assets/img/swipe/banner10.jpg")
                },
                {
                    "id":"11",
                    "imgUrl":require("@/assets/img/swipe/banner11.jpg")
                }
            ]
        }
    }
}
</script>
<style>
.swipe{
    height: 8rem;
    margin-top: 2.5rem;
}
.mint-swipe-indicator{
    opacity: .8;
}
.mint-swipe-indicator.is-active{
    background-color: red;
}
img{
    height: 100%;
    width: 100%;
}
</style>


